<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/non-responsive.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/types.css" rel="stylesheet">    
<link href="../css/unslider.css" rel="stylesheet">  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../js/jquery.min.js"></script>
<script src="../js/unslider.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.js"></script> 
<script src="../js/logout.js"></script>
</head>
<body>
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- left div -->
			<div class="col-xs-9">
<!-- 一个大分类 循环开始处 -->
			{% for i in types %}
				<div class="a_type pull-left">
					<div class="a_type1 pull-left">
						<div class="type_title"><b>{{i.name}}</b></div>
						<div class="type_inter"><a href="{% url 'courses:tinytypes' i.id %}" type="button" class="btn btn-primary btn-sm">进入</a></div>
					</div>
					<div class="a_type2 pull-left">
						<img src="{{i.img}}" width="100px" height="130px"/>
					</div>
					<div class="clearfix"></div>
				</div>
			{% endfor %}
<!-- 一个大分类 循环结束处 -->
				<div class="clearfix"></div>
			</div>

<!-- right div -->
			<div class="col-xs-3">
				<div><img src="http://mztypes.qiniudn.com/001.png" width="100%"/></div>
				<div class="hot_newpage">
					<!--<div style="margin-bottom:5px"><a href=""><span class="glyphicon glyphicon-globe"></span> 热门推荐</a></div>-->
					<div><a href="{% url 'courses:coursecreate' %}"><b><i class="icon-cloud-upload"></i> 创建新的课程</b></a></div>
				</div>
{{recommend}}
<!-- 推荐 -->
				<div class="my">
					<div class="banner" style="width:500px;margin-bottom:-30px">
						<ul style="height:400px;">
							<li style="background-color:#F8F8FF;">
								<div class="inner">
									<div class="my_title"><b>推荐课程</b></div>
<!-- 前三个推荐  循环开始处 -->
								{% for i in courses1 %}
									<div class="a_guy">
										<div class="pull-left person_avatar"><a href="{% url 'courses:thecourse' i.2 %}"><img src="{{i.0}}/{{i.1}}" width="100%"/></a></div>
										<div class="pull-left person_content">
											<div><span class="person_name"><a href="{% url 'courses:thecourse' i.2 %}"><b>{{i.3}}</b></a></span></div>
										</div>
										<div class="clearfix"></div> 
									</div>
								{% endfor %}
<!-- 前三个推荐  循环结束处 -->
								</div>
							</li>
			
					
					<li style="background-color:#F8F8FF;">
								<div class="inner">
									<div class="my_title"><b>推荐课程</b></div>
<!-- 三个推荐  循环开始处 -->
								{% for i in courses2 %}
									<div class="a_guy">
										<div class="pull-left person_avatar"><a href="{% url 'courses:thecourse' i.2 %}"><img src="{{i.0}}/{{i.1}}" width="100%"/></a></div>
										<div class="pull-left person_content">
											<div><span class="person_name"><a href="{% url 'courses:thecourse' i.2 %}"><b>{{i.3}}</b></a></span></div>
											
											
										</div>
										<div class="clearfix"></div> 
									</div>
								{% endfor %}
<!-- 三个推荐  循环结束处 -->
								</div>
							</li>		

							<li style="background-color:#F8F8FF;">
								<div class="inner">
									<div class="my_title"><b>推荐课程</b></div>
<!-- 后三个推荐  循环开始处 -->
									{% for i in courses3 %}
									<div class="a_guy">
										<div class="pull-left person_avatar"><a href="{% url 'courses:thecourse' i.2 %}"><img src="{{i.0}}/{{i.1}}" width="100%"/></a></div>
										<div class="pull-left person_content">
											<div><span class="person_name"><a href="{% url 'courses:thecourse' i.2 %}"><b>{{i.3}}</b></a></span></div>
											
											
										</div>
										<div class="clearfix"></div> 
									</div>
								{% endfor %}
<!-- 后三个推荐  循环结束处 -->
								</div>
							</li>
			
						</ul>
					</div>
		
				</div>
<!-- 推荐 结束处-->
			</div>
		</div>
	</div>
	<script type="text/javascript">
	if(window.chrome) {
			$('.banner li').css('background-size', '100% 100%');
		}

		$('.banner').unslider({
			//arrows: true,
			fluid: true,
			dots: true
		});

		
		
	</script>
</body>
</html>